<template>
  <main class="wss-container">
    <div class="label-box-content">
      <el-row :gutter="30" type="flex">
        <el-col :span="6">
          <NewCard title="咨询类别">
            <div class="leftMenu">
              <div
                style="display: flex; align-items: center"
                class="leftSearch"
              >
                <!-- 一级类别 -->
                <el-select
                  @change="selectChangeFirst"
                  clearable
                  placeholder="请选择"
                  value="未审核"
                  v-model="SelectFirstLevel"
                >
                  <el-option
                    :value="item.id"
                    :label="item && item.name"
                    v-for="item in typeList"
                    :key="item.id"
                  ></el-option>
                </el-select>
              </div>
              <el-menu
                :default-active="twoCurrentSelectIndex"
                class="el-menu-vertical-demo"
                ref="elMenu"
              >
                <!-- 二级类别 -->
                <el-menu-item
                  v-for="(item, index) in currentTwoType"
                  :key="index"
                  :index="item.id"
                  @click="menuItemSelectSecond(item)"
                >
                  <span slot="title">
                    {{ item && item.name }}
                  </span>
                </el-menu-item>
              </el-menu>
            </div>
          </NewCard>
        </el-col>

        <el-col :span="6">
          <NewCard title="咨询类别">
            <div class="leftMenu">
              <!-- 三级类别 -->
              <el-menu class="el-menu-vertical-demo" ref="elMenu">
                <el-menu-item
                  :style="{
                    'background-color': istwo ? '#ffffff' : '',
                    color: istwo ? 'black' : '',
                  }"
                  v-for="(item, index) in threeLevel"
                  :key="index"
                  :index="item.id"
                  @click="menuItemSelectThird(item)"
                >
                  <span slot="title">
                    {{ item && item.name }}
                  </span>
                </el-menu-item>
              </el-menu>
            </div>
          </NewCard>
        </el-col>
        <el-col :span="12">
          <NewCard :isright="true" style="flex: 1" :title="addOrEditTitle">
            <template #right>
              <el-button
                type="primary"
                size="mini"
                @click="submitForm('editFormData')"
                >新增与保存</el-button
              >
              <!-- <el-button size="mini" @click="resetForm('editFormData')"
                >删除</el-button
              > -->
            </template>
            <el-form
              :model="editFormData"
              :rules="rules"
              ref="form"
              label-width="140px"
              label-position="left"
              class="demo-editFormData"
              style="width: 100%"
            >
              <el-form-item label="新增操作">
                <el-radio-group @change="labelTypeChange" v-model="typeLevel">
                  <el-radio :label="1">一级类别</el-radio>
                  <el-radio :label="2">二级类别</el-radio>
                  <el-radio :label="3">三级类别</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item v-if="currentLevel != 1" label="一级类别">
                <template>
                  <el-select
                    @change="editSelectChangeFirst"
                    v-model="editFirstLevel"
                    placeholder="请选择"
                  >
                    <el-option
                      :value="item.id"
                      :label="item && item.name"
                      v-for="item in typeList"
                      :key="item.id"
                    >
                    </el-option>
                  </el-select>
                </template>
              </el-form-item>
              <el-form-item
                prop="name"
                v-if="currentLevel == 1"
                label="类型名称"
              >
                <el-input v-model="editFormData.name"></el-input>
              </el-form-item>
              <el-form-item
                prop="expertOffice.name"
                v-if="currentLevel == 1"
                label="专家类型名称"
              >
                <el-input v-model="editFormData.expertOffice.name"></el-input>
              </el-form-item>
              <el-form-item
                prop="expertOffice.describable"
                v-if="currentLevel == 1"
                label="专家类型描述"
              >
                <el-input
                  v-model="editFormData.expertOffice.describable"
                ></el-input>
              </el-form-item>
              <el-form-item
                prop="expertOffice.base64"
                v-if="currentLevel == 1"
                label="专家类型上传图片"
              >
                <el-upload
                  :auto-upload="false"
                  class="avatar-uploader"
                  action="#"
                  :show-file-list="false"
                  :on-change="getBase64ESFn"
                >
                  <img
                    v-if="pictureObj.getBase64ESUrl"
                    :src="pictureObj.getBase64ESUrl"
                    class="avatar"
                  />
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-form-item>

              <el-form-item
                prop="mIcon2base64"
                v-if="currentLevel == 1"
                label="移动一级选选中图标"
              >
                <el-upload
                  :auto-upload="false"
                  class="avatar-uploader"
                  action="#"
                  :show-file-list="false"
                  :on-change="getBase64MESFn"
                >
                  <img
                    v-if="pictureObj.getBase64MESUrl"
                    :src="pictureObj.getBase64MESUrl"
                    class="avatar"
                  />
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-form-item>
              <el-form-item
                prop="mIcon1base64"
                v-if="currentLevel == 1"
                label="移动一级未选中图标"
              >
                <el-upload
                  :auto-upload="false"
                  class="avatar-uploader"
                  action="#"
                  :show-file-list="false"
                  :on-change="getBase64UMESFn"
                >
                  <img
                    v-if="pictureObj.getBase64UMESUrl"
                    :src="pictureObj.getBase64UMESUrl"
                    class="avatar"
                  />
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-form-item>

              <el-form-item
                prop="icon1base64"
                v-if="currentLevel == 1"
                label="pc一级选中图标"
              >
                <el-upload
                  :auto-upload="false"
                  class="avatar-uploader"
                  action="#"
                  :show-file-list="false"
                  :on-change="getBase64PCESFn"
                >
                  <img
                    v-if="editFormData.icon2"
                    :src="editFormData.icon2"
                    class="avatar"
                  />
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-form-item>
              <el-form-item
                prop="icon2base64"
                v-if="currentLevel == 1"
                label="pc一级未选中图标"
              >
                <el-upload
                  :auto-upload="false"
                  class="avatar-uploader"
                  action="#"
                  :show-file-list="false"
                  :on-change="getBase64PCUESFn"
                >
                  <img
                    v-if="editFormData.icon1"
                    :src="editFormData.icon1"
                    class="avatar"
                  />
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-form-item>

              <!-- 不等于一级类别才显示 -->
              <template v-if="currentLevel != 1">
                <el-form-item label="二级类别">
                  <el-input
                    v-if="currentLevel == 2"
                    v-model="editFormData.name"
                  ></el-input>
                  <template v-else>
                    <el-select
                      v-model="editSecondLevel"
                      @change="selectThreePid"
                      placeholder="请选择"
                    >
                      <el-option
                        :label="item && item.name"
                        v-for="item in EditTwoChidren"
                        :value="item.id"
                        :key="item.id"
                      >
                      </el-option>
                    </el-select>
                  </template>
                </el-form-item>
                <el-form-item v-if="currentLevel == 3" label="三级类别">
                  <el-input v-model="editFormData.name"></el-input>
                </el-form-item>
                <el-form-item label="回复结构">
                  <el-input v-model="editFormData.describable"></el-input>
                </el-form-item>
                <template v-if="currentLevel != 2">
                  <el-form-item label="亮点一">
                    <el-input v-model="editFormData.highlight1"></el-input>
                  </el-form-item>
                  <el-form-item label="亮点二">
                    <el-input v-model="editFormData.highlight2"></el-input>
                  </el-form-item>
                  <el-form-item label="提问时限">
                    <el-input v-model="editFormData.questionTime"></el-input>
                  </el-form-item>
                  <el-form-item label="回复时限">
                    <el-input v-model="editFormData.answerTime"></el-input>
                  </el-form-item>

                  <el-form-item prop="quota" label="类限">
                    <el-input v-model="editFormData.quota"></el-input>
                  </el-form-item>
                </template>

                <el-form-item :label="uploadTitile">
                  <el-upload
                    :auto-upload="false"
                    class="avatar-uploader"
                    action="#"
                    :show-file-list="false"
                    :on-change="getBase64PCUESFn"
                  >
                    <img
                      v-if="editFormData.icon1"
                      :src="editFormData.icon1"
                      class="avatar"
                    />
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
                </el-form-item>
              </template>
              <el-form-item prop="status" label="状态">
                <el-radio-group v-model="editFormData.status">
                  <el-radio label="0">开启</el-radio>
                  <el-radio label="1">关闭</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-form>
          </NewCard>
        </el-col>
      </el-row>
    </div>
  </main>
</template>

<script>
import NewCard from "@/wss/components/newCard.vue";
import {
  getConsultTypeListApi,
  getConsultTypeAddApi,
  getConsultTypeEditApi,
} from "@/wss/newApi_3-24/work/consultType.js";
import { changeBase64Fn, changeFileToURLFn } from "@/wss/utils/wss.js";

//
export default {
  name: "expertCert",
  components: { NewCard },
  data() {
    return {
      // 二级菜单当前激活的是哪一项
      twoCurrentSelectIndex: "",
      // 当前是编辑还是新增提示
      addOrEditTitle: "新增",

      // 是否是二级
      istwo: false,
      // 类型类别
      typeLevel: 1,
      pictureObj: {
        //  pc上传icon
        getBase64PCESUrl: "",
        // pc未上传icon
        getBase64UPCESUrl: "",
        // 移动上传icon
        getBase64MESUrl: "",
        // 移动未上传icon
        getBase64UMESUrl: "",

        // 专家上传icon
        getBase64ESUrl: "",
      },
      currentTwoType: [],
      // 编辑选择等级
      editSecondLevel: "",
      // 选择一级类别
      SelectFirstLevel: "",
      // 编辑一级类别的值
      editFirstLevel: 1,
      // 编辑的类别
      currentLevel: 1,
      // 图片url
      imageUrl: "",
      // 上传图片标题
      uploadTitile: "二级分类图标",
      //擅长领域
      filterText: "",
      //指定节点标签和子树节点对象
      defaultProps: {
        children: "children",
        label: "label",
      },
      // 三级类别
      threeLevel: [],

      selectMenu: {},
      //   选择的二级
      selectSecond: {},

      typeList: [],
      //表单验证
      rules: {
        name: [
          {
            required: true,
            message: "请输入类型名称",
            trigger: "blur",
          },
        ],
        // 提问时限（分钟）
        questionTime: [
          {
            required: true,
            message: "请输入提问时间",
            trigger: "blur",
          },
        ],
        // 回答时限（分钟）
        answerTime: [
          {
            required: true,
            message: "请输入回答时间",
            trigger: "blur",
          },
        ],
        // int	Y	回答时限（分钟）
        "expertOffice.name": [
          {
            required: true,
            message: "请输入专家类型名称",
            trigger: "blur",
          },
        ],
        "expertOffice.describable": [
          {
            required: true,
            message: "请输入专家类型描述",
            trigger: "blur",
          },
        ],
        status: [
          {
            required: true,
            message: "请选择状态",
            trigger: "change",
          },
        ],

        "expertOffice.base64": [
          {
            required: true,
            message: "请选择上传专家图片",
            trigger: "change",
          },
        ],
        icon1base64: [
          {
            required: true,
            message: "请上传pc未选中图标",
            trigger: "change",
          },
        ],
        icon2base64: [
          {
            required: true,
            message: "请上传pc选中图标",
            trigger: "change",
          },
        ],
        mIcon1base64: [
          {
            required: true,
            message: "请上传移动端未选中图标",
            trigger: "change",
          },
        ],
        mIcon2base64: [
          {
            required: true,
            message: "请上传移动端选中图标",
            trigger: "change",
          },
        ],
        describable: [
          {
            required: true,
            message: "请输入描述",
            trigger: "blur",
          },
        ],
        quota: [
          {
            required: true,
            message: "请输入类限",
            trigger: "blur",
          },
        ],
      },
      // 编辑二级类别
      EditTwoChidren: [],
      editFormData: {
        questionTime: "",
        // 提问时限（分钟）
        answerTime: "",
        // int	Y	回答时限（分钟）
        pid: "",
        // Long	Y	父id(当是1级分类是必须写1)
        name: "",
        // string	Y	类别名称
        type: "1",
        // string	Y	1:一级类别 2:二级类别 3:三级类别
        status: "0",
        // String	Y	状态 0正常 1停止
        quota: "",
        // String	Y	类别限额
        icon1base64: "",
        // String	Y	pc图片的base64形式
        icon1format: "",
        // String	Y	pc图片格式(.jpg)
        icon2base64: "",
        // String	Y	pc图片的base64形式
        icon2format: "",
        // String	Y	pc图片格式(.jpg)
        mIcon1base64: "",
        // String	Y	移动端图片的base64形式
        mIcon1format: "",
        // String	Y	移动端图片格式(.jpg)
        mIcon2base64: "",
        // String	Y	移动端图片的base64形式
        mIcon2format: "",
        // String	Y	移动端图片格式(.jpg)
        highlight1: "",
        // String	N	亮点描述1(只有三级标签才会有)
        highlight2: "",
        // String	N	亮点描述2(只有三级标签才会有)
        describable: "",
        // String	N	描述(只有三级标签才会有)
        expertOffice: {
          pid: "",
          // string	N	父类id
          type: "1",
          // string	N	1 专家类型 2 专家职称
          name: "",
          // string	N	名称
          base64: "",
          // string	N	图片的base64形式
          format: ".jpg",
          // string	N	图片格式(.jpg)
          describable: "",
          // string	N	描述
        },
      },
    };
  },
  mounted() {
    this.getConsultTypeListFn();
  },
  watch: {},
  methods: {
    // 专家
    getBase64ESFn(item) {
      let editFormData = this.editFormData;
      this.pictureObj.getBase64ESUrl = changeFileToURLFn(item.raw);
      changeBase64Fn(item.raw, (base64) => {
        editFormData.expertOffice.base64 = base64.split(",")[1];
      }).base64;

      editFormData.expertOffice.format = "." + item.name.split(".")[1];
    },
    // Pc选中
    getBase64PCESFn(item) {
      let editFormData = this.editFormData;
      editFormData.icon2 = changeFileToURLFn(item.raw);
      changeBase64Fn(item.raw, (base64) => {
        editFormData.icon2base64 = base64.split(",")[1];
      });

      editFormData.icon2format = "." + item.name.split(".")[1];
    },
    // Pc未选中/或者二三级图标
    getBase64PCUESFn(item) {
      let editFormData = this.editFormData;
      editFormData.icon1 = changeFileToURLFn(item.raw);
      changeBase64Fn(item.raw, (base64) => {
        editFormData.icon1base64 = base64.split(",")[1];
      });

      editFormData.icon1format = "." + item.name.split(".")[1];
    },
    // 移动端选中icon
    getBase64MESFn(item) {
      let editFormData = this.editFormData;
      this.pictureObj.getBase64MESUrl = changeFileToURLFn(item.raw);
      changeBase64Fn(item.raw, (base64) => {
        editFormData.mIcon2base64 = base64.split(",")[1];
      });
      editFormData.mIcon2format = "." + item.name.split(".")[1];
    },
    // 移动端未选中icon
    getBase64UMESFn(item) {
      let editFormData = this.editFormData;
      this.pictureObj.getBase64UMESUrl = changeFileToURLFn(item.raw);
      changeBase64Fn(item.raw, (base64) => {
        editFormData.mIcon1base64 = base64.split(",")[1];
      });

      editFormData.mIcon1format = "." + item.name.split(".")[1];
    },
    mergeFn(oneLevel, TwoLevel, threeLevel) {
      oneLevel.forEach((item) => {
        item.children = [];
        TwoLevel.forEach((s) => {
          s.children = [];
          if (item.id == s.pid) {
            item.children.push(s);
          }
          threeLevel.forEach((t) => {
            if (t.pid == s.id) {
              s.children.push(t);
            }
          });
        });
      });
      return oneLevel;
    },
    // 获取咨询类型
    async getConsultTypeListFn() {
      let { code, rows } = await getConsultTypeListApi();
      if (code != 200) return;
      this.typeList = JSON.parse(JSON.stringify(rows));
      return;
      let readerData = JSON.parse(JSON.stringify(rows));
      let oneLevel = [],
        TwoLevel = [],
        threeLevel = [];
      // console.log(readerData);
      readerData.forEach((item) => {
        if (item.type == 1) {
          oneLevel.push(item);
        } else if (item.type == 2) {
          TwoLevel.push(item);
        } else if (item.type == 3) {
          threeLevel.push(item);
        }
      });
      this.typeList = this.mergeFn(oneLevel, TwoLevel, threeLevel);
      // console.log(this.typeList, "能不能先化页面");
    },
    editSelectChangeFirst(value) {
      let currentOne = this.typeList.find((item) => item.id == value);
      this.editFormData.pid = currentOne.id;
      this.EditTwoChidren = currentOne.children;
      this.editSecondLevel = "";
    },
    subtraction(level) {
      console.log(level);
    },
    // 选择三级类别pid
    selectThreePid(id) {
      console.log(id);
      this.editFormData.pid = id;
    },
    add(level) {
      switch (level) {
        case 1:
          this.currentLevel = 1;
          this.typeLevel = 1;
          break;

        case 2:
          this.currentLevel = 2;
          this.typeLevel = 2;

          break;
        case 3:
          this.currentLevel = 3;
          this.typeLevel = 3;

          break;
      }
      this.editFormData = {};
    },
    beforeAvatarUpload() {},
    // 初始化参数
    initParams(val) {
      const _this = this;
      _this.editFormData = {
        questionTime: "",
        // 提问时限（分钟）
        answerTime: "",
        // int	Y	回答时限（分钟）
        pid: "",
        // Long	Y	父id(当是1级分类是必须写1)
        name: "",
        // string	Y	类别名称
        type: !!val ? val : 1,
        // string	Y	1:一级类别 2:二级类别 3:三级类别
        status: "0",
        // String	Y	状态 0正常 1停止
        quota: "",
        // String	Y	类别限额
        icon1base64: "",
        // String	Y	pc图片的base64形式
        icon1format: "",
        // String	Y	pc图片格式(.jpg)
        icon2base64: "",
        // String	Y	pc图片的base64形式
        icon2format: "",
        // String	Y	pc图片格式(.jpg)
        mIcon1base64: "",
        // String	Y	移动端图片的base64形式
        mIcon1format: "",
        // String	Y	移动端图片格式(.jpg)
        mIcon2base64: "",
        // String	Y	移动端图片的base64形式
        mIcon2format: "",
        // String	Y	移动端图片格式(.jpg)
        highlight1: "",
        // String	N	亮点描述1(只有三级标签才会有)
        highlight2: "",
        // String	N	亮点描述2(只有三级标签才会有)
        describable: "",
        // String	N	描述(只有三级标签才会有)
        expertOffice: {
          pid: "",
          // string	N	父类id
          type: "1",
          // string	N	1 专家类型 2 专家职称
          name: "",
          // string	N	名称
          base64: "",
          // string	N	图片的base64形式
          format: ".jpg",
          // string	N	图片格式(.jpg)
          describable: "",
          // string	N	描述
        },
      };

      // 清空编辑二级分类类别
      _this.EditTwoChidren = [];

      // 清空二级所选的值
      _this.editSecondLevel = "";
      _this.pictureObj = {
        //  pc上传icon
        getBase64PCESUrl: "",
        // pc未上传icon
        getBase64UPCESUrl: "",
        // 移动上传icon
        getBase64MESUrl: "",
        // 移动未上传icon
        getBase64UMESUrl: "",

        // 专家上传icon
        getBase64ESUrl: "",
      };
      _this.editFirstLevel = "";
    },
    // 编辑类别切换
    labelTypeChange(val) {
      this.addOrEditTitle = "新增";
      const _this = this;
      _this.currentLevel = val;
      if (_this.currentLevel == 2) {
        _this.uploadTitile = "二级分类图标";
      } else {
        _this.uploadTitile = "三级分类图标";
      }
      console.log(_this.currentLevel);
      _this.$refs.form.clearValidate();
      _this.initParams(val);
      _this.editFormData.type = val;
    },
    addUpdateLoad(editFormData) {
      console.log(editFormData);
      if (editFormData.type == 2) {
        this.selectChangeFirst(editFormData.pid);
      }
    },
    // 新增
    async addFirstLevelFn() {
      const _this = this;
      // 清空编辑一级分类类别
      _this.typeList = [];
      let { code, msg } = await getConsultTypeAddApi(_this.editFormData);
      let editFormData = JSON.parse(JSON.stringify(_this.editFormData));
      if (code != 200) return;
      _this.initParams(_this.editFormData.type);
      await _this.getConsultTypeListFn();
      // this.updateLoad(JSON.parse(JSON.stringify(_this.editFormData)));
      _this.addUpdateLoad(editFormData);
      _this.$message({
        message: msg,
        type: "success",
      });
    },
    // 更新二级和三级数据
    async updateLoad(editFormData) {
      const _this = this;
      if (editFormData.type == 2) {
        let editTwo, TwoLevel;
        // 更新二级
        if (editFormData.pid) {
          TwoLevel = _this.typeList.find(
            (item) => item.id == editFormData.pid
          )?.children;

          editTwo = TwoLevel.find((item) => item.id == editFormData.id);
          await _this.menuItemSelectSecond(editTwo);
        }

        _this.currentTwoType = TwoLevel;
        console.log(TwoLevel);

        // 更新一节的类型
        _this.SelectFirstLevel = editTwo.pid;
      } else if (editFormData.type == 3) {
        // 找到当前所在的二级类型
        let currentTwo = _this.EditTwoChidren.find(
          (item) => item.id == editFormData.pid
        );
        // 找出更新后的二级分类
        let TwoLevel = _this.typeList.find(
          (item) => item.id == currentTwo.pid
        ).children;
        this.currentTwoType = TwoLevel;

        // 找出当前所编辑的二级分类
        let editTwo = TwoLevel.find((item) => item.id == editFormData.pid);

        let deepEditTwo = JSON.parse(JSON.stringify(editTwo));
        this.twoCurrentSelectIndex = editFormData.pid;
        // 更新二级
        await _this.menuItemSelectSecond(deepEditTwo);
        let editThree = deepEditTwo.children.find((item) => {
          return item.id == editFormData.id;
        });
        // console.log(editThree, "这是三级");
        editThree = JSON.parse(JSON.stringify(editThree));
        // 更新三级
        this.menuItemSelectThird(editThree);
      }
    },
    // 编辑
    async editType() {
      const _this = this;
      _this.editFormData.type = this.currentLevel;
      let { code, msg } = await getConsultTypeEditApi(_this.editFormData);
      if (code != 200) return;
      await _this.getConsultTypeListFn();

      this.updateLoad(JSON.parse(JSON.stringify(_this.editFormData)));
      _this.$message({
        message: msg,
        type: "success",
      });
    },
    // 确认
    async submitForm(formName) {
      const _this = this;
      await _this.$refs.form.validate();
      // 有id就是编辑
      if (!!_this.editFormData.id) {
        this.editType();
      } else {
        // 反之就不是
        _this.addFirstLevelFn();
      }
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    //   一级类别选择
    selectChangeFirst(id) {
      const _this = this;
      _this.typeLevel = 1;
      console.log(_this.typeList, "风中的面孔啊");
      let item = _this.typeList.find((item) => item.id == id);
      console.log(item);
      _this.currentLevel = 1;
      _this.currentTwoType = JSON.parse(JSON.stringify(item.children));
      _this.initParams();
    },
    // 二级类别选择
    menuItemSelectSecond(item) {
      const _this = this;

      _this.addOrEditTitle = "编辑";
      _this.editFirstLevel = item.pid;

      // 防止item.children是undefined
      if (item.children) {
        _this.threeLevel = JSON.parse(JSON.stringify(item.children));
      } else {
        _this.threeLevel = [];
      }
      _this.editFormData = Object.assign(
        _this.editFormData,
        JSON.parse(JSON.stringify(item))
      );

      _this.typeLevel = 2;
      _this.currentLevel = 2;
      _this.pictureObj.getBase64UPCESUrl = item.icon1;
    },
    // 三级选择
    menuItemSelectThird(item) {
      const _this = this;

      _this.addOrEditTitle = "编辑";

      _this.editFormData = JSON.parse(JSON.stringify(item));

      // Object.assign(_this.editFormData, item);
      // console.log(_this.editFormData, "好的好的");
      _this.pictureObj.getBase64UPCESUrl = item.icon1;
      _this.EditTwoChidren = JSON.parse(JSON.stringify(_this.currentTwoType));
      _this.editSecondLevel = item.pid;

      // console.log(item, "okok");
      this.currentLevel = 3;
      this.typeLevel = 3;
    },
  },
  computed: {
    //左侧下拉框筛选
  },
};
</script>

<style  scoped>
.label-box-content {
  height: 100%;
}
.el-input-number--mini {
  width: 100px;
}
.el-card >>> .top {
  border-bottom: 0;
  padding-top: 0;
}
.el-card >>> .el-card__body {
  position: relative;
  height: 100%;
}
.el-card >>> .el-card__body > div {
  padding-top: 0 !important;
  height: 92%;
  overflow-y: auto;
}
.corrExpert .el-card >>> .el-card__body > div {
  overflow-y: initial;
}

.el-row,
.el-card {
  height: 100%;
  margin-bottom: 0;
}
.label-box-content >>> h1 {
  margin: 0;
  padding: 20px 0 15px 0;
  border-bottom: 1px solid #e6ebf5;
}
.label-box-content >>> .top::after {
  height: 0;
}

/* 左侧菜单 */
.leftMenu {
  margin-top: 20px;
}
.el-menu {
  border-right: 0;
}
.el-menu-item {
  height: 44px;
  line-height: 44px;
  border-radius: 4px;
  padding: 0 10px !important;
}
.el-menu-item.is-active {
  background-color: #1890ff;
  color: #fff;
}
.el-menu-item > span {
  display: flex;
  justify-content: space-between;
  align-content: center;
  align-items: center;
}
.el-menu-item > span .auditTxt {
  font-size: 13px;
  color: #666;
}
.el-menu-item.is-active .auditTxt {
  color: #eee;
}
.leftMenu .leftSearch {
  position: absolute;
  right: 20px;
  top: 10px;
  z-index: 9;
}
.leftMenu >>> .el-input--medium .el-input__inner {
  width: 95px;
}
.el-menu-item:hover .el-icon-success {
  color: #67c23a;
}
.el-menu-item:hover .el-icon-warning {
  color: #ffba00;
}
/* 左侧菜单 end*/

/* 中间个人信息 */
.infoExpert {
  height: 100%;
}
.el-col-24 {
  margin-top: 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid #e6ebf5;
}
.expertInfoImg {
  display: flex;
  align-items: center;
}
.expertInfoImg h1 {
  border-bottom: 0;
}
.expertInfoImg img {
  width: 70px;
  height: 70px;
  object-fit: cover;
  border-radius: 50%;
}
.expertInfoImg h1 {
  font-weight: bold;
  font-size: 20px;
  margin-left: 20px;
}
.el-descriptions-item__label {
  margin-right: 0;
}
.perInfo >>> .el-descriptions__title {
  font-size: 18px;
}
.el-image {
  width: 250px;
  height: 170px;
  border-radius: 10px;
}
.certTitle {
  font-size: 20px;
}
.workExp {
  margin-top: 10px;
}
.workExp h2 {
  margin-top: 0;
  font-size: 16px;
  font-weight: bold;
}
.workExp h2 > span {
  font-size: 15px;
  font-weight: 400;
  color: #7d7d7d;
}
.workExp i {
  color: #7d7d7d;
  font-size: 13px;
}
.workExp ol {
  padding-left: 20px;
  margin-top: 10px;
}
.workExp li {
  font-size: 14px;
  line-height: 28px;
}
.historyInfo {
  margin-top: 0;
  font-size: 14px;
  line-height: 28px;
}
/* 中间个人信息end */

/* 专家审核 样式 */
.el-select {
  width: 100%;
}
.expertRev {
  margin-top: 20px;
}
.el-form >>> .el-form-item .el-form-item__label {
  padding: 0;
}
.expertRev >>> .el-form-item__content {
  position: initial;
}
.expertRev .el-button {
  position: absolute;
  top: 10px;
  right: 20px;
  padding: 8px 10px;
  font-size: 13px;
}
::v-deep .avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
::v-deep .avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
::v-deep .avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 130px;
  height: 130px;
  line-height: 130px;
  text-align: center;
}
::v-deep .avatar {
  width: 130px;
  height: 130px;
  display: block;
}
</style>